<template>
	<view class="baseForm">
		
		<!-- 卡片显示 -->
		<text class="list-title">存储类型({{ total }})</text>
		<view v-if="indexList.length" class="list">
			<!-- 列表 -->
			<u-list @scrolltolower="scrolltolower" class="list" v-if="total" lowerThreshold="100px" :scrollable="false" height="auto">
				<u-list-item v-for="(item, index) in indexList" :key="item.id" @click="jumpToDetail(item.id,item.storageTypeCode,item.storageSectionCode)">
					<view class="card">
						<view class="right">
							<view class="title">存储类型号：{{ item.storageTypeCode }}</view>
							<view class="body">
								存储类型名称：{{ item.storageTypeName }}
							</view>
						</view>
					<view class="left">
						<view class="enter">
							<u-icon name="arrow-right" color="#999" size="16px"></u-icon>
						</view>
					</view>
						
					</view>
				</u-list-item>
			</u-list>
		</view>
		<u-loading-icon v-if="loading"></u-loading-icon>
		<view v-if="!loading && !indexList.length">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
	</view>
	<u-back-top :scroll-top="scrollTop" top="200" mode="squery"></u-back-top>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app';
import ScanBar from '@/components/scan-bar/index.vue';
import { http } from '@/utils/http';
import { PageResult } from '@/types/type';

const props = defineProps({
  id: {
    type: String,
    default: '',
  }
});

// 获取安全距离高度
const { safeAreaInsets } = uni.getSystemInfoSync();
// 监听页面到顶部距离
const scrollTop = ref(0)
onPageScroll((e)=>{
	scrollTop.value = e.scrollTop
})

// 触底监听
onReachBottom(()=>{
	scrolltolower()
});

onShow(()=>{
	getScanResult();
})
// 获取扫码结果
function getScanResult() {
	// 获取code码详细信息，并进行赋值
	
	reset();
    loadmore();
}

// 跳转至详情页面
function jumpToDetail(id: string,storageTypeCode:string,storageSectionCode:string) {
	
	uni.navigateTo({
	
		url: `/pages/use/newinventory/commit?id=${id}&storageTypeCode=${storageTypeCode}&storageSectionCode=${storageSectionCode}`
	});
}

// 请求列表参数定义
const indexList = ref([]); // 列表数据
const current = ref(0); // 当前页
const totalPage = ref(0); //累计分页
const total = ref(0); // 累计条数
const code = ref(''); // 扫码结果

// 初始化参数
function reset () {
	current.value = 0;
	indexList.value = [];
	total.value = 0;
	totalPage.value = 0;
}

// 请求处理
const loading = ref(false);
async function loadmore () {
	try{
		loading.value = true
		current.value += 1
		const result: PageResult<any>  = await http({
			method: 'POST',
			url: '/wms/wmsinventorytaskarea/queryByPage',
			data: {
				current: current.value,
				size: 20,
				data: {
					 inventoryTaskId: props.id
				}
			}
		})
		const list = result.data;
		totalPage.value = result.page;
		total.value = result.total;
		for (let i = 0; i < list.length; i++) {

			indexList.value.push(list[i]);
		}
		loading.value = false
	}catch(e){
		loading.value = false
		console.log(e)
	}
	
}
const scrolltolower = () => {
	totalPage.value > current.value && loadmore();
};
</script>

<style lang="scss" scoped>
.baseForm {
	:deep(.uni-scroll-view) {
		overflow: inherit;
	}
	.u-form {
		padding: $uni-page-padding;
		:deep(.u-form-item__body) {
			padding: 5px 0;
		}
		.u-input {
			border: 1px solid $uni-input-border-color;
		}
		.scan-bar {
			margin-top: 5px;
			display: flex;
			flex: 1;
		}
	}
	.u-line {
		padding: 10px 0;
	}
	.search {
		display: flex;
		.custom-style {
			// width: 120px;
			margin: 10px 5px 5px;
			height: 36px;
			border-radius: 8px;
			&:nth-child(1) {
				flex: 1
			}
			&:nth-child(2) {
				flex: 3
			}
		}
	}
	.list-title {
		line-height: 40px;
		font-size: 14px;
		color: rgba(0, 0, 0, 0.4);
		margin-left: 15px;
	}
	.list {
		// margin: $uni-page-padding;
		.card {
			margin-top: 5px;
			margin-bottom: 10px;
			margin-left: 10px;
			margin-right: 10px;
			border-radius: 7px;
			display: flex;
			align-items: center;
			padding: 10px 0;
			transition: all 300ms ease;
			box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
			.left {
				// flex-basis: 90rpx;
				padding-right: 10px;
				text-align: right;
				font-size: 13px;
				.enter {
					line-height: 20px;
					margin-bottom: 5px;
				}
				.number {
					font-size: 13px;
					line-height: 18px;
					margin-right: 5px;
				}
				:deep(.u-icon--right) {
					flex-direction: row-reverse;
				}
			}
			.right {
				flex: 1;
				padding-left: 15px;
				.title {
					font-size: 15px;
					line-height: 20px;
					margin-bottom: 5px;
				}
				.body {
					color: rgba(0, 0, 0, 0.4);
					font-size: 13px;
					line-height: 18px;
				}
			}
		}
	}
}
</style>
